<!-- 上传组件（文件上传待测试） -->
<template>
  <div class="img-upload" ref="upload">
    <a-upload
      ref="uploadDom"
      v-viewer
      @change="handleSuccess"
      :file-list="config.fileList"
      :headers="config.header"
      :data="data"
      :action="config.baseUrl"
      :accept="config.accept"
      list-type="picture-card"
      :before-upload="beforeUpload"
      :showUploadList="false"
      :multiple="false"
      :disabled="disabled"
    >
      <div>
        裁剪上传
      </div>
    </a-upload>
    <cropperImgVue :cropperImg="url" @getCrofile="getCrofile" @clear="clear" :optionWidth="optionWidth" :optionHeigth="optionHeigth" :fixedNumber="fixedNumber" />
  </div>
</template>

<script>
import { getToken } from '@/util/method'
// import { uploadImgUrl } from '@/util'
import cropperImgVue from '../cropperImg.vue'
export default {
  name: 'upload',
  components: {
    cropperImgVue
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }, // 上传成功图片地址
    disabled: {
      type: Boolean,
      default: false
    }, // 是否禁用
    action: {
      type: String,
      default: ''
    }, // 上传接口地址
    data: {
      type: Object,
      default: () => {
        return {
          fileType: 1
        }
      }
    }, // 给后端带的参数
    type: {
      type: String,
      default: 'image'
    }, // 上传类型 image/file
    optionWidth: {
      // 裁剪框宽
      default: 900
    },
    optionHeigth: {
      // 裁剪高宽
      default: 600
    },
    fixedNumber: {
      default: () => [1.5, 1]
    }
  },
  data() {
    return {
      isAction: false, // 是否是上传图片的操作
      urls: [], // 图片数据
      limit: 1,
      config: {
        header: {
          Authorization: getToken()
        },
        baseUrl: '',
        fileList: [],
        listType: 'picture-card', // 上传成功展示样式 默认展示图片
        accept: '.gif,.png,.jpg' // 上传类型限制
      },
      url: ''
    }
  },
  methods: {
    // 上传 失败/成功/删除
    handleSuccess(file) {
      return false
    },
    // 裁剪
    beforeUpload(file) {
      console.log('裁剪')
      this.url = URL.createObjectURL(file)
      console.log(this.url)
      return false
    },
    getCrofile(file) {
      this.$emit('getCrofile', file)
      this.url = ''
    },
    clear() {
      this.url = ''
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .ant-upload-list-item-info,
.img-upload {
  margin: 0;
}
</style>
